/** @file 组件 **/
import myUtils from '@/utils/myUtils';

export default {
    props: {
        historyTime: {
            type: Array,
            default: () => []
        },
        historyValue: {
            type: Array,
            default: () => []
        },
        status: {
            type: Boolean,
            default: true
        }
    },
    watch: {
        status: function (newVal) {
            if (this.historyValue.length > 0) {
                this.onInquire();
            }
        }
    },

    data () {
        return {
            echart: null,
            echartId: '',
            reflesh: true
        };
    },
    created () {
        this.echartId = myUtils.generateUUID();
    },
    mounted () {
        window.addEventListener('resize', () => {
            if (this.echart) {
                this.echart.resize();
            }
        });

        this.onInquire()
    },
    methods: {

        // 历史曲线
        onInquire () {
            if (this.historyValue.length > 0) {
                setTimeout(() => {
                    this.echart = this.$echart.init(
                        document.getElementById(this.echartId),
                        'light'
                    );

                    this.echart.setOption({
                        grid: {
                            left: '30px',
                            top: '10%',
                            right: '55px',
                            bottom: '11%',
                            containLabel: true,
                            color: 'red'
                        },
                        tooltip: {
                            style: {
                                color: 'red'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#999fa8',
                                    width: 1 // 这里是为了突出显示加上的
                                }
                            },
                            axisLabel: {
                                margin: 12,
                                textStyle: {
                                    color: '#d3d8e2',
                                    fontSize: '13'
                                }
                            },
                            labels: {
                                style: {
                                    color: '#d3d8e2'
                                }
                            },
                            style: {
                                color: '#d3d8e2'
                            },

                            data: this.historyTime
                        },
                        yAxis: {
                            gridLineColor: '#3b4357',
                            gridLineWidth: 1,
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                margin: 12,
                                textStyle: {
                                    color: '#d3d8e2',
                                    fontSize: '13'
                                }
                            },
                            style: {
                                color: '#d3d8e2',
                                fontWeight: 'bold',
                                fontSize: '12px',
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                            },

                            title: {
                                style: {
                                    color: '#d3d8e2',
                                    fontWeight: 'bold',
                                    fontSize: '12px',
                                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                                }
                            },
                            labels: {
                                style: {
                                    color: '#d3d8e2'
                                }
                            }
                        },
                        dataZoom: [
                            {
                                show: true,
                                type: 'slider',
                                top: '90%',
                                start: 0,
                                end: 10,
                                textStyle: {
                                    color: '#d3d8e2',
                                    fontSize: '10'
                                },
                                labelFormatter: function (value, time) {
                                    return time.split(' ')[0] + '\n' + time.split(' ')[1];
                                }
                            }
                        ],
                        series: [
                            {
                                data: this.historyValue,
                                type: 'line',
                                smooth: true,
                                sampling: 'average'
                            }
                        ]
                    }, { background: 'black' });
                    this.echart.hideLoading();
                }, 500);
            }

        }
    }
};
